<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>活动专区</title>
  <script type="text/javascript" src="../static/js/jquery.min.js"></script>
  <script type="text/javascript" src="../static/js/script.js"></script>
  <script type="text/javascript" src="../static/js/template.js"></script>
  <link rel="stylesheet" href="../static/font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="../static/css/style.css">
  <style>

  </style>
</head>

<body>
  <div class="wrapper">
    <div class="header headerbs">
      <div class="glogo"></div>
      <div class="nav">
        <div onclick="window.location.href='../index/index.html?type=index'">首页</div>
        <div onclick="window.location.href='../resources/index.html?type=online'">资源在线</div>
        <div onclick="window.location.href='../headmaster/index.html?type=teacher'">班主任工作</div>
        <div onclick="window.location.href='../classroom/index.html?type=classroom'">德育讲堂</div>
        <div class="active">活动专区</div>
      </div>
    </div>
    <div class="maincontent">
      <div class="left">
        <div class="text">
          课题征集&nbsp; <i class="fa fa-angle-right"></i>
        </div>
        <div class="left_item">
          <div class="item_left">
              <div class="isruning">进行中</div>
            <img src="../static/img/timg.jpg" alt="">
          </div>
          <div class="item_right">
            <a href="./zhengji_detail.html?type=activity">
              <div class="title">课题征集标题</div>
            </a>

            <div class="time">
              <span>活动时间：</span>
              <span id="date">6月20号-8月20号</span>
            </div>
            <div class="content ">
              课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介
            </div>
            <div class="detail">
              <a href="./zhengji_detail.html?type=activity">
                <div>查看详情 <i class="fa fa-angle-double-right"></i></div>
              </a>

              <div>2020-06-16</div>
            </div>

          </div>
        </div>
        <div class="left_item">
          <div class="item_left">
            <div class="isruning">进行中</div>
            <img src="../static/img/timg.jpg" alt="">
          </div>
          <div class="item_right">
            <a href="">
              <div class="title">课题征集标题</div>
            </a>

            <div class="time">
              <span>活动时间：</span>
              <span id="date">6月20号-8月20号</span>
            </div>
            <div class="content">
              课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介
            </div>
            <div class="detail">
              <a href="">
                <div>查看详情 <i class="fa fa-angle-double-right"></i></div>
              </a>

              <div>2020-06-16</div>
            </div>

          </div>
        </div>
        <div class="left_item">
          <div class="item_left">
            <img src="../static/img/timg.jpg" alt="">
          </div>
          <div class="item_right">
            <a href="">
              <div class="title">课题征集标题</div>
            </a>

            <div class="time">
              <span>活动时间：</span>
              <span id="date">6月20号-8月20号</span>
            </div>
            <div class="content">
              课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介
            </div>
            <div class="detail">
              <a href="">
                <div>查看详情 <i class="fa fa-angle-double-right"></i></div>
              </a>

              <div>2020-06-16</div>
            </div>

          </div>
        </div>
        <div class="left_item">
          <div class="item_left">
            <img src="../static/img/timg.jpg" alt="">
          </div>
          <div class="item_right">
            <a href="">
              <div class="title">课题征集标题</div>
            </a>

            <div class="time">
              <span>活动时间：</span>
              <span id="date">6月20号-8月20号</span>
            </div>
            <div class="content">
              课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介课题征集内容简介
            </div>
            <div class="detail">
              <a href="">
                <div>查看详情 <i class="fa fa-angle-double-right"></i></div>
              </a>

              <div>2020-06-16</div>
            </div>

          </div>
        </div>

      </div>
      <div class="right">
        <div class="top">
          <a href="./activity_notice.html?type=activity">
            <div class="top_title">
              | 公告通知
            </div>
          </a>

          <div class="top_content">
            <ul>
              <li><a href="./activity_list.html?type=activity">这是一条公告标题这是一条公告标题</a></li>
              <li><a href="./activity_list.html">这是一条公告标题这是一条公告标题</a></li>
              <li><a href="./activity_list.html">这是一条公告标题这是一条公告标题</a></li>
              <li><a href="./activity_list.html">这是一条公告标题这是一条公告标题</a></li>
              <li><a href="">这是一条公告标题这是一条公告标题</a></li>
              <li><a href="">这是一条公告标题这是一条公告标题</a></li>
              <li><a href="">这是一条公告标题这是一条公告标题</a></li>
              <li><a href="">这是一条公告标题这是一条公告标题</a></li>
            </ul>
          </div>
        </div>
        <div class="center">
          <a href="./message.html?type=activity">
            <div class="center_title">| 留言板</div>
          </a>

          <div class="center_content">
            <ul>
              <li class="message">
                <div>用户昵称：</div>
                <div>这是一条留言内容这是一用户内容</div>
              </li>
              <li class="message">
                <div>用户昵称：</div>
                <div>这是一条留言内容这是一用户内容</div>
              </li>
              <li class="message">
                <div>用户昵称：</div>
                <div>这是一条留言内容这是一用户内容</div>
              </li>
            </ul>
          </div>
          <div>
            <textarea name="" id="input" cols="30" rows="10" placeholder="我要留言" resize:none;></textarea>

          </div>
          <div class="submit"><button id="submit">提交</button></div>
        </div>
        <div class="bottom">
          <a href="./service.html?type=activity">
            <div class="center_title">| 服务支持</div>
          </a>

          <div class="bottom_contact">
            服务支持服务支持服务支持服务支持服务支持服务支持服务支持服务支持服务支持服务支持服务支持服务支持服务支持服务支持服务支持服务支持服务支持服务支持服务支持服务支持服务支持服务支持服务支持服务支持
          </div>
          <div><a href="./service.html?type=activity" id="detail_link">查看详情 <i class="fa fa-angle-double-right"></i></a></div>


        </div>

      </div>

    </div>

  </div>
  <div class="footer">
    <p>主办单位:央馆德育资源服务平台&nbsp;&nbsp;&nbsp;&nbsp;协办单位:安徽安教德育资源服务平台</p>
    <p>COPYRIGHT2020 YANGGUANG. ALL RIGHTS RESERVED.</p>
  </div>

</body>

</html>


<script>
  $(function () {
    $(window).scroll(function () {
      var scrollHeight = $(document).scrollTop();
      if (scrollHeight > 1000) {
        $(".toup").fadeIn();
      } else {
        $(".toup").fadeOut();
      };
    });

    $(".toup").click(function () {
      $("html,body").animate({ scrollTop: '0px' }, 200);
    });
  });
</script>
<style>
  .active {
    color: #9F38F8;
  }

  a {
    text-decoration: none;
    border: none;


  }
  textarea{
    resize: none;
  }

  .maincontent {
    margin-top: 60px;
    display: flex;

  }

  .left {
    flex: 2.4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .text {
    padding: 20px 0;
    color: #797979;
    font-size: 20px;
  }

  .left_item {
    width: 100%;
    height: 195px;
    background-color: #aaa;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;


  }

  .item_left {
    width: 285px;
    height: 195px;
    position: relative;

  }

  .isruning {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 108px;
    height: 45px;
    background: rgba(158, 191, 60, 1);
    color: #fff;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;

  }

  .item_right {
    flex: 1;
    padding: 10px 30px;
    background-color: #fff;
  }

  .item_right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

  }

  .detail {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #bfbfbf;
  }

  .detail a {

    font-size: 14px;
    color: #bfbfbf;
  }

  .title {
    color: #444;
    font-size: 20px;
    margin-bottom: 20px;
  }

  .time {
    color: #797979;
    font-size: 18px;
  }

  #date {
    color: #9EBF3C;
  }

  .content {
    text-indent: 25px;
    font-size: 14px;
    color: #a1a1a1;
    line-height: 24px;
  }

  .top {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;

  }

  .top_title {
    font-size: 20px;
    color: #959595;
    padding: 20px 0;
  }

  .top_content {
    background-color: #f0f0f0;
  }

  .top_content li {
    color: #797979;
    margin-bottom: 15px;
  }

  .top_content a {
    color: #797979;
    font-size: 16px;

  }

  .center {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    font-size: 16px;

  }

  .center_title {
    font-size: 20px;
    color: #959595;
    padding: 20px 0;

  }

  .center ul {
    padding: 10px;

  }

  .message {
    display: flex;
    justify-content: space-between;
    color: #bcbcbc;
    font-size: 16px;
    margin-bottom: 10px;
  }

  #input {
    margin-left: 10px;
    width: 90%;
    height: 80px;
    padding-left: 10px;
    margin-bottom: 20px;

  }

  #submit {
    border: 0;
    background-color: transparent;
    outline: none;
    width: 112px;
    height: 38px;
    color: #fff;
    background-color: #9EBF3C;
    cursor: pointer;
  }

  .submit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;

  }

  .bottom_contact {
    text-indent: 25px;
    margin-bottom: 20px;
    color: #b9b9b9;
    font-size: 15px;
    line-height: 24px;
  }

  #detail_link {
    font-size: 14px;
    color: #bfbfbf;

  }
</style>